<template>
    <div class="my-title" :class="{'is-border': isBorder}">
        <p>{{ title }}</p>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        isBorder: {
            type: Boolean,
            default: true
        }
    }
}
</script>

<style lang="scss" scoped>
.my-title {
    padding: 0.5rem 0;

    p {
        font-size: 1.4rem;
        padding: 0.5rem 1rem;
        color: gray;
        display: inline-block;
        background: -webkit-linear-gradient(to right, #dedddd , #fcfafe); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to right, #dedddd, #fcfafe); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to right, #dedddded, #fcfafe); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #dedddd , #fcfafe); /* 标准的语法 */
    }
}
.is-border {
    border-top: 1px solid #f1f0f1;
    border-bottom: 1px solid #f1f0f1;
}
</style>
